<template>
  <div class="main-scroll">
    <cheader :title="title"></cheader>
    <div class="c-main-make">
      <div class="title-text">
        <p>数据筛选</p>
      </div>
      <div style="padding: 40px" class="c-filter">
        <el-form :inline="true" :model="findMsg" class="demo-form-inline">
          <el-form-item label="员工姓名:">
            <el-input
              v-model="findMsg.lecturerName"
              placeholder="请输入员工姓名"
            ></el-input>
            <!-- <el-autocomplete
              v-model="state"
              :fetch-suggestions="querySearchAsync"
              placeholder="请输入内容"
              @select="handleSelect"
              @input="findUser"
            >
              <template slot-scope="{ item }">
                <div class="name">{{ item.emplName }}</div>
              </template>
            </el-autocomplete> -->
          </el-form-item>
          <el-form-item label="培训时间">
            <el-date-picker
              v-model="findMsg.courseTime"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="部门">
            <el-input
              v-model="findMsg.workshop"
              placeholder="部门"></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
            <el-button @click="reset">重置</el-button> -->
            <el-button type="primary" icon="el-icon-search" @click="query">查询</el-button>
            <el-button @click="reset">清除查询条件</el-button>
          </el-form-item>
          <el-form-item label="培训状态">
            <el-select v-model="findMsg.status" placeholder="请选择培训状态" @change="changeStatus">
              <el-option label="未开始" value="2"></el-option>
              <el-option label="进行中" value="3"></el-option>
              <el-option label="待评分" value="4"></el-option>
              <el-option label="班组审核" value="5"></el-option>
              <el-option label="车间审核" value="6"></el-option>
              <el-option label="已完成" value="7"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="输入班组">
            <el-input
              v-model="findMsg.team"
              placeholder="班组"
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div class="c-main-show">
      <div class="main-seting">
        <div class="title-text">
          <p>培训列表</p>
        </div>
          <el-button
          type="primary"
          style="
            float: right;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
          "
          @click='addTrain'>发起培训</el-button>
          <el-button
          style="
            float: right;
            margin-right: 20px;
            margin-bottom: 20px;
            margin-top: 20px;
          ">导出</el-button>

        <!-- 培训列表 -->
        <div style="margin: 20px">
          <el-table :data="trainList" border>
            <el-table-column type="index" :index="indexAdd" label="序号">
              </el-table-column>
            <el-table-column prop="courseTheme" label="小课主题">
              <template slot-scope="scope">
                <p>{{ scope.row.courseTheme }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="workshop" label="部门">
              <template slot-scope="scope">
                <p>{{ scope.row.workshop }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="team" label="班组">
              <template slot-scope="scope">
                <p>{{ scope.row.team }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="courseTime" label="授课时间" width="200">
              <template slot-scope="scope">
                <p>{{ scope.row.courseTime | formatDate("yyyy-MM-dd HH:mm:ss") }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="lecturerName" label="授课人">
              <template slot-scope="scope">
                <p>{{ scope.row.lecturerName }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="status" label="培训状态">
              <template slot-scope="scope">
                <p>{{ statusfun(scope.row.status) }}</p>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="300">
              <template slot-scope="scope">
                <el-button type="text" v-if="scope.row.buttons.indexOf(1)!==-1" @click="isConfirm(scope.row.id)">待确认</el-button>
                <el-button type="text" v-if="scope.row.buttons.indexOf(2)!==-1" @click="writeRecord(scope.row.id)">填写培训记录</el-button>
                <el-button type="text" v-if="scope.row.buttons.indexOf(3)!==-1" @click="teamExamine(scope.row.id)">班组审核</el-button>
                <el-button type="text" v-if="scope.row.buttons.indexOf(4)!==-1" @click="workshopExamine(scope.row.id)">车间审核</el-button>
                <el-button type="text" v-if="scope.row.buttons.indexOf(5)!==-1" @click="goScore(scope.row.id)">评分</el-button>
                <el-button type="text" v-if="scope.row.buttons.indexOf(6)!==-1" @click='goDetail(scope.row.id)'>培训详情</el-button>
                <el-button type="text" v-if="scope.row.buttons.indexOf(7)!==-1" @click="deleteRecord(scope.row.id)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pageSize"
          :total="total"
          :hide-on-single-page="total < 10"
          @current-change="currentChange"
          style="margin-left: 25%;"
        >
        </el-pagination>
      </div>
    </div>
    <el-dialog title="添加" :visible.sync="dialogVisibleAdd" width="50%">
      <el-form ref="addForm" :model="addForm" :rules="rules1" label-width="130px">
        <el-form-item label="小课主题:" prop="courseTheme" required>
          <el-input
            v-model="addForm.courseTheme"
            placeholder="请填写小课主题"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课培训类型:" prop="trainingType" required>
          <el-select v-model="addForm.trainingType" placeholder="请选择培训类型" @change="changeType">
              <el-option label="安全类" value="1"></el-option>
              <el-option label="设备类" value="2"></el-option>
              <el-option label="工艺类" value="3"></el-option>
              <el-option label="综合类" value="4"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item label="授课时间:" prop="courseTime" required>
          <el-date-picker
            v-model="addForm.courseTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
            default-time="12:00:00">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="车间:" prop="workshop" required>
          <el-select
              filterable
              @change="workshopfun"
              v-model="value1"
              placeholder="请选择车间"
            >
            <el-option
              v-for="item in deptlists1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-select
            v-model="addForm.workshop"
            filterable
            remote
            reserve-keyword
            placeholder="请填写车间审核人"
            :remote-method="workshopRemoteMethod"
            :loading="workshopLoading"
            clearable
          >
            <el-option
              v-for="item in workshopOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select> -->
          
        </el-form-item>
        <el-form-item label="班组:" prop="team" required>
          <el-select
              filterable
              @change="teamfun"
              v-model="value2"
              placeholder="请选择班组"
            >
            <el-option
              v-for="item in deptlists2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="是否按计划执行:" prop="isPlan" required>
          <el-radio v-model="addForm.isPlan" label="1" border>是</el-radio>
          <el-radio v-model="addForm.isPlan" label="0" border>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:" prop="lecturerId" required>
          <el-select
            v-model="addForm.lecturerId"
            filterable
            remote
            reserve-keyword
            placeholder="请填写授课人"
            :remote-method="lecturerNameRemoteMethod"
            :loading="lecturerNameLoading"
            clearable
          >
            <el-option
              v-for="item in lecturerNameOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="班组审核人:" prop="teamAuditor" required>
          <el-select
            v-model="addForm.teamAuditor"
            filterable
            remote
            reserve-keyword
            placeholder="请填写班组审核人"
            :remote-method="teamAuditorRemoteMethod"
            :loading="teamAuditorLoading"
            clearable
          >
            <el-option
              v-for="item in teamAuditorOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车间审核人:" prop="workshopAuditor" required>
          <el-select
            v-model="addForm.workshopAuditor"
            filterable
            remote
            reserve-keyword
            placeholder="请填写车间审核人"
            :remote-method="workshopAuditorRemoteMethod"
            :loading="workshopAuditorLoading"
            clearable
          >
            <el-option
              v-for="item in workshopAuditorOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="应到人数:" prop="shouldNumber" required>
          <el-input
            v-model="addForm.shouldNumber"
            placeholder="请填写应到人数"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课目的:" prop="purpose" required>
          <el-input
            v-model="addForm.purpose"
            placeholder="请填写小课目的"
          ></el-input>
        </el-form-item>
        <el-form-item label="参加人员:" prop="participationIds" required>
          <el-select
            v-model="addForm.participationIds"
            filterable
            remote
            placeholder="请填写参加人员"
            multiple
            :remote-method="participationIdsRemoteMethod"
            :loading="participationIdsLoading"
            clearable
          >
            <el-option
              v-for="item in participationIdsOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-select
              filterable
              @change="workshopfun"
              v-model="participation"
              multiple
              placeholder="巡检人姓名"
            >
              <el-option
                v-for="item in options"
                :key="item.id"
                :label="item.emplName"
                :value="item.id"
              >
              </el-option>
            </el-select> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelAdd">取 消</el-button>
        <el-button type="primary" @click="addDetail">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="培训待确认" :visible.sync="dialogVisibleIsConfirm" width="50%">
      <el-form ref="detailList" :model="detailList" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input v-model="detailList.courseTheme" disabled></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-input v-model="courseTimeNow" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input v-model="detailList.workshop" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input v-model="detailList.team" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="detailList.isPlan" label="1" disabled>是</el-radio>
          <el-radio v-model="detailList.isPlan" label="0" disabled>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input v-model="detailList.lecturerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input v-model="detailList.teamAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input v-model="detailList.workshopAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input v-model="detailList.shouldNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input v-model="detailList.purpose" disabled></el-input>
        </el-form-item>
        <!-- <el-form-item label="参加人员:">
          <el-input v-model="detailList.participation" disabled></el-input>
        </el-form-item> -->
        <el-form-item label="参加人员:">
          <ul class="PeopleList">
            <!-- <li v-if="detailList.joinArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in detailList.joinArrivalNames" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="不参加人员:">
          <ul class="PeopleList">
            <!-- <li v-if="detailList.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in detailList.nonArrivalNames" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="不参加原因:">
          <!-- <el-input v-model="detailList.nonArrivalCause" disabled></el-input> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="notJoin">不参加</el-button>
        <el-button type="primary" @click="goJoin">确定参加</el-button>
      </span>
    </el-dialog>
    <el-dialog title="填写培训记录" :visible.sync="dialogVisibleRecord" width="50%">
      <el-form ref="changeMsg" :model="changeMsg" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input
            v-model="changeMsg.courseTheme"
            placeholder="请填写小课主题"
          ></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-input v-model="courseTimeNow" disabled></el-input>
        </el-form-item>
        <el-form-item label="车间:">
          <el-select
              filterable
              @change="workshopfun1"
              v-model="changeMsg.workshopName"
              placeholder="请选择车间"
            >
            <el-option
              v-for="item in deptlists1"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="changeMsg.workshop"
            placeholder="请填写部门"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="班组:">
          <el-select
              filterable
              @change="teamfun1"
              v-model="changeMsg.teamName"
              placeholder="请选择班组"
            >
            <el-option
              v-for="item in deptlists2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="changeMsg.team"
            placeholder="请填写班组"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="changeMsg.isPlan" label="1" border>是</el-radio>
          <el-radio v-model="changeMsg.isPlan" label="0" border>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-select
            v-model="changeMsg.lecturerName"
            filterable
            remote
            reserve-keyword
            placeholder="请填写授课人"
            @change="SelectLecturer"
            :remote-method="lecturerNameRemoteMethod"
            :loading="lecturerNameLoading"
            clearable
          >
            <el-option
              v-for="item in lecturerNameOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="changeMsg.lecturerId"
            placeholder="请填写授课人"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-select
            v-model="changeMsg.teamAuditorName"
            filterable
            remote
            reserve-keyword
            placeholder="请填写班组审核人"
            @change="SelectTeamAuditorName"
            :remote-method="teamAuditorRemoteMethod"
            :loading="teamAuditorLoading"
            clearable
          >
            <el-option
              v-for="item in teamAuditorOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="changeMsg.teamAuditor"
            placeholder="请填写班组审核人"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-select
            v-model="changeMsg.workshopAuditorName"
            filterable
            remote
            reserve-keyword
            @change="SelectWorkshopAuditorName"
            placeholder="请填写班组审核人"
            :remote-method="workshopAuditorRemoteMethod"
            :loading="workshopAuditorLoading"
            clearable
          >
            <el-option
              v-for="item in workshopAuditorOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="changeMsg.workshopAuditor"
            placeholder="请填写车间审核人"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input
            v-model="changeMsg.shouldNumber"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="实到人数:">
          <el-input
            v-model="changeMsg.practicalNumber"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="未到人员姓名:">
          <el-select
            v-model="changeMsg.nonArrivalNames"
            filterable
            remote
            placeholder="当前没有未到人员，是否完善修改"
            multiple
            @change="SelectNonArrivalNames"
            :remote-method="nonArrivalNamesRemoteMethod"
            :loading="nonArrivalNamesLoading"
            clearable
          >
            <el-option
              v-for="item in nonArrivalNamesOptions"
              :key="item.id"
              :label="item.emplName"
              :value="item.emplName"
            >
            </el-option>
          </el-select>
          <!-- <el-input
            v-model="changeMsg.nonArrivalNames"
          ></el-input> -->
        </el-form-item>
        <el-form-item label="未到原因:">
          <el-input
            v-model="changeMsg.nonArrivalCause"
            type='textarea'
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input
            v-model="changeMsg.purpose"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课重点内容:">
          <el-input
            v-model="changeMsg.courseContent"
            type="textarea"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="互动提问:">
          <el-input
            v-model="changeMsg.interaction"
            type="textarea"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="小课总结:">
          <el-input
            v-model="changeMsg.courseSummary"
            type="textarea"
            placeholder="请填写"
          ></el-input>
        </el-form-item>
        <el-form-item label="培训图片:">
          <el-upload
            class="upload-demo"
            ref="upload"
            action="https://jsonplaceholder.typicode.com/posts/"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :file-list="fileList"
            :auto-upload="false">
            <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
            <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
          <!-- <el-upload
            action="https://jsonplaceholder.typicode.com/posts/"
            list-type="picture-card"
            :on-preview="handlePictureCardPreview"
            :on-remove="handleRemove">
            <i class="el-icon-plus"></i>
          </el-upload>
          <el-dialog :visible.sync="dialogVisibleImg">
            <img width="100%" :src="dialogImageUrl" alt="">
          </el-dialog> -->
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="changeNow">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="班组审核" :visible.sync="dialogVisibleTeamExamine" width="50%">
      <el-form ref="examineList" :model="examineList" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input v-model="examineList.courseTheme" disabled></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-input v-model="courseTimeNow" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input v-model="examineList.workshop" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input v-model="examineList.team" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="examineList.isPlan" label="1" disabled>是</el-radio>
          <el-radio v-model="examineList.isPlan" label="0" disabled>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input v-model="examineList.lecturerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input v-model="examineList.teamAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input v-model="examineList.workshopAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input v-model="examineList.shouldNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="实到人数:">
          <el-input v-model="examineList.practicalNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="未到人数:">
          <el-input v-model="uncommittedNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="未到人员:">
          <ul class="PeopleList">
            <!-- <li v-if="examineList.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in examineList.nonArrivalNames" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="未到原因:">
          <!-- <el-input v-model="examineList.nonArrivalCause" disabled></el-input> -->
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input v-model="examineList.purpose" disabled></el-input>
        </el-form-item>
        <el-form-item label="小课重点内容:">
          <el-input
            v-model="examineList.courseContent"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="互动提问:">
          <el-input
            v-model="examineList.interaction"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="小课总结:">
          <el-input
            v-model="examineList.courseSummary"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="培训图片:">
          <el-image 
            v-for="(item,index) in pic"
            :key="index"
            style="width: 100px; height: 100px"
            :src='item'
            :preview-src-list="pic">
          </el-image>
        </el-form-item>
        <el-form-item label="参与人员:">
          <ul class="PeopleList">
            <!-- <li v-if="examineList.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in examineList.participation" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="培训评分表:">
          <el-table :data="scoreNow" border>
            <el-table-column prop="coordinate" label="培训讲师对培训配合度得分（20分）">\
              <template slot-scope="scope">
                <p>{{ scope.row.coordinate }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="prepare" label="培训讲师课件制作、教材的编制、准备工作是否充分（30分）">
              <template slot-scope="scope">
                <p>{{ scope.row.prepare }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="thorough" label="培训讲师讲解内容透彻度（30分）">
              <template slot-scope="scope">
                <p>{{ scope.row.thorough }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="expressive" label="培训讲师的语言表达力（10分）">
              <template slot-scope="scope">
                <p>{{ scope.row.expressive }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="satisfaction" label="本次培训组员工的满意度（10分）">
              <template slot-scope="scope">
                <p>{{ scope.row.satisfaction }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="最终得分">
              <template slot-scope="scope">
                <p>{{ scope.row.score }}</p>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="审核意见:">
          <el-input
            v-model="teamOption"
            type="textarea"
            placeholder="输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineNOT">取消</el-button>
        <el-button type="primary" @click="examineYESTeam">审核确认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="车间审核" :visible.sync="dialogVisibleWorkshopExamine" width="50%">
      <el-form ref="examineList" :model="examineList" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input v-model="examineList.courseTheme" disabled></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-input v-model="courseTimeNow" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input v-model="examineList.workshop" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input v-model="examineList.team" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="examineList.isPlan" label="1" disabled>是</el-radio>
          <el-radio v-model="examineList.isPlan" label="0" disabled>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input v-model="examineList.lecturerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input v-model="examineList.teamAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input v-model="examineList.workshopAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input v-model="examineList.shouldNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="实到人数:">
          <el-input v-model="examineList.practicalNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="未到人数:">
          <el-input v-model="uncommittedNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="未到人员:">
          <ul class="PeopleList">
            <!-- <li v-if="examineList.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in examineList.nonArrivalNames" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="未到原因:">
          <!-- <el-input v-model="examineList.nonArrivalCause" disabled></el-input> -->
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input v-model="examineList.purpose" disabled></el-input>
        </el-form-item>
        <el-form-item label="小课重点内容:">
          <el-input
            v-model="examineList.courseContent"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="互动提问:">
          <el-input
            v-model="examineList.interaction"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="小课总结:">
          <el-input
            v-model="examineList.courseSummary"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="培训图片:">
          <el-image 
            v-for="(item,index) in pic"
            :key="index"
            style="width: 100px; height: 100px"
            :src='item'
            :preview-src-list="pic">
          </el-image>
        </el-form-item>
        <el-form-item label="参与人员:">
          <ul class="PeopleList">
            <!-- <li v-if="examineList.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in examineList.participation" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="培训评分表:">
          <el-table :data="scoreNow" border>
            <el-table-column prop="coordinate" label="培训讲师对培训配合度得分（20分）">\
              <template slot-scope="scope">
                <p>{{ scope.row.coordinate }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="prepare" label="培训讲师课件制作、教材的编制、准备工作是否充分（30分）">
              <template slot-scope="scope">
                <p>{{ scope.row.prepare }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="thorough" label="培训讲师讲解内容透彻度（30分）">
              <template slot-scope="scope">
                <p>{{ scope.row.thorough }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="expressive" label="培训讲师的语言表达力（10分）">
              <template slot-scope="scope">
                <p>{{ scope.row.expressive }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="satisfaction" label="本次培训组员工的满意度（10分）">
              <template slot-scope="scope">
                <p>{{ scope.row.satisfaction }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="最终得分">
              <template slot-scope="scope">
                <p>{{ scope.row.score }}</p>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="审核意见:">
          <el-input
            v-model="teamOption"
            type="textarea"
            placeholder="输入内容"
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="examineNOT">取消</el-button>
        <el-button type="primary" @click="examineYESWorkshop">审核确认</el-button>
      </span>
    </el-dialog>
    <el-dialog title="微小课评分" :visible.sync="dialogVisibleScore" width="50%">
      <el-form ref="addScore" :model="addScore" label-width="130px">
        <el-form-item label="培训讲师对培训配合度（20分）:" required>
          <el-input
            v-model="addScore.coordinate"
            placeholder="请输入分数"
          ></el-input>
        </el-form-item>
        <el-form-item label="课件制作、教材编制、准备是否充分（30分）:" required>
          <el-input
            v-model="addScore.prepare"
            placeholder="请输入分数"
          ></el-input>
        </el-form-item>
        <el-form-item label="讲解内容透彻度（30分）:" required>
          <el-input
            v-model="addScore.thorough"
            placeholder="请输入分数"
          ></el-input>
        </el-form-item>
        <el-form-item label="语言表达力（10分）:" required>
          <el-input
            v-model="addScore.expressive"
            placeholder="请输入分数"
          ></el-input>
        </el-form-item>
        <el-form-item label="本次培训组员工的满意度（10分）:" required>
          <el-input
            v-model="addScore.satisfaction"
            placeholder="请输入分数"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="处室或车间参加技术员签字:" required>
          <el-radio v-model="addScore.signature" label="1" border>确认</el-radio>
          <el-radio v-model="addScore.signature" label="0" border>否</el-radio>
        </el-form-item> -->
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelScore">取 消</el-button>
        <el-button type="primary" @click="courseScore">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="车间审核" :visible.sync="dialogVisibleDetail" width="50%">
      <el-form ref="finnalDetail" :model="finnalDetail" label-width="130px">
        <el-form-item label="小课主题:">
          <el-input v-model="finnalDetail.courseTheme" disabled></el-input>
        </el-form-item>
        <el-form-item label="授课时间:">
          <el-input v-model="courseTimeNow" disabled></el-input>
        </el-form-item>
        <el-form-item label="部门:">
          <el-input v-model="finnalDetail.workshop" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组:">
          <el-input v-model="finnalDetail.team" disabled></el-input>
        </el-form-item>
        <el-form-item label="是否按计划执行:">
          <el-radio v-model="finnalDetail.isPlan" label="1" disabled>是</el-radio>
          <el-radio v-model="finnalDetail.isPlan" label="0" disabled>否</el-radio>
        </el-form-item>
        <el-form-item label="授课人:">
          <el-input v-model="finnalDetail.lecturerName" disabled></el-input>
        </el-form-item>
        <el-form-item label="班组审核人:">
          <el-input v-model="finnalDetail.teamAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="车间审核人:">
          <el-input v-model="finnalDetail.workshopAuditor" disabled></el-input>
        </el-form-item>
        <el-form-item label="应到人数:">
          <el-input v-model="finnalDetail.shouldNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="实到人数:">
          <el-input v-model="finnalDetail.practicalNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="未到人数:">
          <el-input v-model="uncommittedNum" disabled></el-input>
        </el-form-item>
        <el-form-item label="未到人员:">
          <ul class="PeopleList">
            <!-- <li v-if="finnalDetail.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in finnalDetail.nonArrivalNames" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="未到原因:">
          <!-- <el-input v-model="finnalDetail.nonArrivalCause" disabled></el-input> -->
        </el-form-item>
        <el-form-item label="小课目的:">
          <el-input v-model="finnalDetail.purpose" disabled></el-input>
        </el-form-item>
        <el-form-item label="小课重点内容:">
          <el-input
            v-model="finnalDetail.courseContent"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="互动提问:">
          <el-input
            v-model="finnalDetail.interaction"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="小课总结:">
          <el-input
            v-model="finnalDetail.courseSummary"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
        <el-form-item label="培训图片:">
          <el-image 
            v-for="(item,index) in pic"
            :key="index"
            style="width: 100px; height: 100px"
            :src='item'
            :preview-src-list="pic">
          </el-image>
        </el-form-item>
        <el-form-item label="参与人员:">
          <ul class="PeopleList">
            <!-- <li v-if="finnalDetail.nonArrivalNames.length==0">无</li> -->
            <li v-for="(item,index) in finnalDetail.participation" :key="index">{{item}}</li>
            <div class="clearfloat"></div>
          </ul>
        </el-form-item>
        <el-form-item label="培训评分表:">
          <el-table :data="scoreNow" border>
            <el-table-column prop="coordinate" label="培训讲师对培训配合度得分（20分）">\
              <template slot-scope="scope">
                <p>{{ scope.row.coordinate }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="prepare" label="培训讲师课件制作、教材的编制、准备工作是否充分（30分）">
              <template slot-scope="scope">
                <p>{{ scope.row.prepare }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="thorough" label="培训讲师讲解内容透彻度（30分）">
              <template slot-scope="scope">
                <p>{{ scope.row.thorough }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="expressive" label="培训讲师的语言表达力（10分）">
              <template slot-scope="scope">
                <p>{{ scope.row.expressive }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="satisfaction" label="本次培训组员工的满意度（10分）">
              <template slot-scope="scope">
                <p>{{ scope.row.satisfaction }}</p>
              </template>
            </el-table-column>
            <el-table-column prop="score" label="最终得分">
              <template slot-scope="scope">
                <p>{{ scope.row.score }}</p>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
        <el-divider></el-divider>
        <el-form-item label="审核意见:">
          <el-input
            v-model="teamOption"
            type="textarea"
            disabled
          ></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="turnOFF">关闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import cheader from "@/components/header.vue";
import utils from "@/utils/utils";
import { getlist,deptlist,getDept,getParentDept } from '@/api/index';
import { trainList,addDetail,courseScore,deleteCourseById,detailsCourse,updateCourseRecordDetails,toBeConfirmedCourseDetails,toBeConfirmedNonArrival,receiveCourse,perfectCourseRecordDetails,teamCheckCourse,workshopCheckCourse } from '@/api/micro-train'
export default {
  components: {
    cheader,
  },
  data() {
    return {
      // userList: [],
      // state:'',
      // timeout:  null,
      title: "培训列表",
      fileList:[],
      value1: [],
      value2: [],
      value3: [],
      rules1:{
        courseTheme:[{ required: true, message: '请填写小课主题', trigger: 'blur' }],
        trainingType:[{ required: true, message: '请选择培训类型', trigger: 'change' }],
        courseTime:[{ required: true, message: '请选择培训时间', trigger: 'change' }],
        workshop:[{ required: true, message: '请选择车间', trigger: 'change' }],
        team:[{ required: true, message: '请选择班组', trigger: 'change' }],
        isPlan:[{ required: true, message: '请选择是否按计划执行', trigger: 'change' }],
        lecturerId:[{ required: true, message: '请搜索授课人', trigger: 'change' }],
        participationIds:[{ required: true, message: '请搜索参加人员', trigger: 'change' }],
        teamAuditor:[{ required: true, message: '请搜索班组审核人', trigger: 'change' }],
        workshopAuditor:[{ required: true, message: '请搜索车间审核人', trigger: 'change' }],
        shouldNumber:[{ required: true, message: '请填写应到人数', trigger: 'blur' }],
        purpose:[{ required: true, message: '请填写小课目的', trigger: 'blur' }],
      },
      // options:"",
      detailList:{},
      finnalDetail:{},
      examineList:{},
      courseTimeNow:'',
      participation:'',
      pic:[
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
      ],
      teamOption:'',
      findMsg:{
        courseTime:'',
        lecturerName:'',
        workshop:'',
        team:'',
        status:'',
      },
      addForm:{
        courseTheme:'',
        courseTime:'',
        isPlan:'',
        lecturerId:'',
        purpose:'',
        team:'',
        teamAuditor:'',
        workshop:'',
        workshopAuditor:'',
        participationIds:[],
        shouldNumber:null,
        trainingType:''
        // participation:[],
      },
      addScore:{
        coordinate:'',
        expressive:'',
        prepare:'',
        satisfaction:'',
        // signature:'',
        thorough:'',
        courseRecordId:'',
      },
      uncommittedNum:'',
      changeMsg:{},
      dialogImageUrl: '',
      dialogVisibleImg: false,
      dialogVisibleAdd: false,
      // dialogVisible2: false,
      // dialogVisible3: false,
      dialogVisibleIsConfirm: false,
      dialogVisibleRecord: false,
      dialogVisibleTeamExamine: false,
      dialogVisibleWorkshopExamine: false,
      dialogVisibleScore: false,
      dialogVisibleDetail: false,
      teamAuditorLoading: false,
      teamAuditorOptions:[],
      workshopLoading: false,
      workshopOptions:[],
      workshopAuditorLoading: false,
      workshopAuditorOptions:[],
      participationIdsLoading: false,
      participationIdsOptions:[],
      lecturerNameLoading: false,
      lecturerNameOptions:[],
      nonArrivalNamesLoading: false,
      nonArrivalNamesOptions:[],
      trainList:[],
      pageNo: 1,  // 分页页码
      pageSize: 10,  // 每页条数
      total: 0,
      deleteThis:'',
      thisConfirmID:'',
      thisRecordID:'',
      thisExamineID:'',
      scoreNow:[],
      deptlists1:[],
      deptlists2:[],
      thisWorkshopId:'',
      thisTeamId:'',
    };
  },
  created() {
    this.getTrainList()
    // this.getoption()
    this.getDeptlist1()
    this.getDeptlist2()
  },
  methods: {
    SelectLecturer(val){
      console.log(val)
      console.log('==val==')
      this.changeMsg.lecturerId = val;
      // this.form.lecturerId = val
    },
    SelectTeamAuditorName(val){
      this.teamAuditor = val;
    },
    SelectWorkshopAuditorName(val){
      this.workshopAuditor = val;
      console.log()
    },
    SelectNonArrivalNames(val){
      // this.nonArrivalNames = val;
      console.log(val,'__________')

    },
    addTrain(){
      this.dialogVisibleAdd = true
      this.$nextTick(()=>{
          this.$refs.addForm.resetFields()
      }) 
      this.addForm = {
        courseTheme:'',
        courseTime:'',
        isPlan:'',
        lecturerId:'',
        purpose:'',
        team:'',
        teamAuditor:'',
        workshop:'',
        workshopAuditor:'',
        participationIds:[],
        shouldNumber:null,
        trainingType:''
      }
    },
    workshopfun(val) {
      this.addForm.workshop = val;
      // this.thisWorkshopId = val;
      //当前车间name（上面显示的传不下来）
      // getDept(val).then(res=>{
      //   this.addForm.workshop = res.data.name
      // })
      //根据车间id获取车间下所有班组
      // getParentDept(val).then(res=>{
      //   this.thisTeam = res.data
      //   console.log(res)
      // })
      //根据车间id获取车间下所有人员(未实现该方法)

    },
    workshopfun1(val) {
      this.changeMsg.workshop = val;
    },
    teamfun(val){
      this.addForm.team = val;
      // getDept(val).then(res=>{
      //   this.addForm.team = res.data.name
      // })
      //根据班组id获取车间下所有人员(未实现该方法)
    },
    teamfun1(val){
      this.changeMsg.team = val;
    },
    //获取2级部门(车间)
    getDeptlist1(){
      deptlist({
        isPage: true,
        pageNo: 1,
        pageSize: 100,
        deptLevel: "2"
      }).then(res=>{
        this.deptlists1 = res.data.list
      })
    },
    //获取4级部门(班组)
    getDeptlist2(){
      deptlist({
        isPage: true,
        pageNo: 1,
        pageSize: 200,
        deptLevel: "4"
      }).then(res=>{
        this.deptlists2 = res.data.list
      })
    },
    async lecturerNameRemoteMethod(query) {
      if (query !== '') {
        this.lecturerNameLoading = true
        const res = await getlist({
          emplName: query
        })
        if (res.code == 200) {
          console.log("res",res)
          this.lecturerNameLoading = false
          this.lecturerNameOptions = res.data
        }
      } else {
        this.lecturerNameOptions = []
      }
    },
    async teamAuditorRemoteMethod(query) {
      if (query !== '') {
        this.teamAuditorLoading = true
        const res = await getlist({
          emplName: query
        })
        if (res.code == 200) {
          console.log("res",res)
          this.teamAuditorLoading = false
          this.teamAuditorOptions = res.data
        }
      } else {
        this.teamAuditorOptions = []
      }
    },
    async workshopRemoteMethod(query) {
      if (query !== '') {
        this.workshopLoading = true
        // const res = await deptlist({
        //   deptName: query,
        //   pageNo:1,
        //   pageSize:50,
        //   isPage:false
        // })
        // if (res.code == 200) {
        //   console.log("res",res)
        //   this.workshopLoading = false
        //   this.workshopOptions = res.data
        // }
      } else {
        this.workshopOptions = []
      }
    },
    async workshopAuditorRemoteMethod(query) {
      if (query !== '') {
        this.workshopAuditorLoading = true
        const res = await getlist({
          emplName: query
        })
        if (res.code == 200) {
          console.log("res",res)
          this.workshopAuditorLoading = false
          this.workshopAuditorOptions = res.data
        }
      } else {
        this.workshopAuditorOptions = []
      }
    },
    async participationIdsRemoteMethod(query) {
      if (query !== '') {
        this.participationIdsLoading = true
        const res = await getlist({
          emplName: query
        })
        if (res.code == 200) {
          console.log("res",res)
          this.participationIdsLoading = false
          this.participationIdsOptions = res.data
        }
      } else {
        this.participationIdsOptions = []
      }
    },
    async nonArrivalNamesRemoteMethod(query) {
      if (query !== '') {
        this.nonArrivalNamesLoading = true
        const res = await getlist({
          emplName: query
        })
        if (res.code == 200) {
          console.log("res",res)
          this.nonArrivalNamesLoading = false
          this.nonArrivalNamesOptions = res.data
        }
      } else {
        this.nonArrivalNamesOptions = []
      }
    },
    changeStatus(e){
      this.findMsg.status = e;
      console.log(e)
    },
    changeType(e){
      this.addForm.trainingType = e
    },
    isConfirm(id){
      this.dialogVisibleIsConfirm = true;
      // console.log(id)
      toBeConfirmedCourseDetails({"id":id}).then(res=>{
        // console.log(res)
        this.thisConfirmID = id;
        this.detailList = res.data;
        this.courseTimeNow = utils.formatDate(this.detailList.courseTime,'yyyy-MM-dd HH:mm:ss')
      })
    },
    writeRecord(id){
      this.dialogVisibleRecord = true;
      detailsCourse({"id":id}).then(res=>{
        console.log(res)
        this.thisRecordID = id;
        this.changeMsg = res.data;
        this.courseTimeNow = utils.formatDate(res.data.courseTime,'yyyy-MM-dd HH:mm:ss')
        
      })
    },
    teamExamine(id){
      this.dialogVisibleTeamExamine = true;
      detailsCourse({"id":id}).then(res=>{
        console.log(res)
        this.thisExamineID = id;
        this.examineList = res.data;
        this.uncommittedNum = res.data.shouldNumber-res.data.practicalNumber;
        // console.log("??????",res.data.participation)
        this.courseTimeNow = utils.formatDate(res.data.courseTime,'yyyy-MM-dd HH:mm:ss')
        this.scoreNow = [{
          "coordinate": res.data.coordinate,
          "prepare": res.data.prepare,
          "thorough": res.data.thorough,
          "expressive": res.data.expressive,
          "satisfaction": res.data.satisfaction,
          "score": res.data.score
        }];
      })
    },
    workshopExamine(id){
      this.dialogVisibleWorkshopExamine = true;
      detailsCourse({"id":id}).then(res=>{
        console.log(res)
        this.thisExamineID = id;
        this.examineList = res.data;
        this.uncommittedNum = res.data.shouldNumber-res.data.practicalNumber;
        // console.log("??????",res.data.participation)
        this.courseTimeNow = utils.formatDate(res.data.courseTime,'yyyy-MM-dd HH:mm:ss')
        this.scoreNow = [{
          "coordinate": res.data.coordinate,
          "prepare": res.data.prepare,
          "thorough": res.data.thorough,
          "expressive": res.data.expressive,
          "satisfaction": res.data.satisfaction,
          "score": res.data.score
        }];
      })
    },
    turnOFF(){
      this.dialogVisibleDetail = false;
    },
    examineNOT(){
      this.teamOption = ''
      this.dialogVisibleTeamExamine = false;
      this.dialogVisibleWorkshopExamine = false;
      this.$message({
        type: 'info',
        message: '取消操作'
      }); 
    },
    examineYESTeam(){
      teamCheckCourse({
        "id": this.thisExamineID,
        "teamOption": this.teamOption,
      }).then(res=>{
        console.log(res)
        this.teamOption = ''
        this.dialogVisibleTeamExamine = false;
        this.$message({
          type: 'success',
          message: '审核完成'
        });
      })
    },
    examineYESWorkshop(){
      workshopCheckCourse({
        "id": this.thisExamineID,
        "workshopOption": this.teamOption,
      }).then(res=>{
        console.log(res)
        this.teamOption = ''
        this.dialogVisibleWorkshopExamine = false;
        this.$message({
          type: 'success',
          message: '审核完成'
        });
      })
    },
    statusfun(data){
      if(data==2){
        return '未开始';
      }else if(data==3){
        return '进行中';
      }else if(data==4){
        return '待评分'
      }else if(data==5){
        return '班组审核'
      }else if(data==6){
        return '车间审核'
      }else if(data==7){
        return '已完成'
      }
    },
    addDetail() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          console.log('在这在这',this.addForm.lecturerId,this.addForm.team,this.addForm.workshop,this.addForm.workshopAuditor,this.addForm.teamAuditor)
          const res = await addDetail({
            courseTheme: this.addForm.courseTheme,
            courseTime: this.addForm.courseTime,
            trainingType: this.addForm.trainingType,
            isPlan: this.addForm.isPlan,
            lecturerId: this.addForm.lecturerId,
            purpose: this.addForm.purpose,
            team: this.addForm.team,
            teamAuditor: this.addForm.teamAuditor,
            workshop: this.addForm.workshop,
            workshopAuditor: this.addForm.workshopAuditor,
            shouldNumber: this.addForm.shouldNumber,
            participationIds: this.addForm.participationIds,
          })
          if (res.code == 200) {
            this.$message({
              message: '创建成功',
              type: 'success',
            })
            this.dialogVisibleAdd = false
            this.getTrainList()
            this.$refs.addForm.resetFields()
            this.addForm = {
              courseTheme:'',
              courseTime:'',
              isPlan:'',
              lecturerId:'',
              purpose:'',
              team:'',
              teamAuditor:'',
              workshop:'',
              workshopAuditor:'',
              participationIds:[],
              shouldNumber:null,
              trainingType:''
            }
            this.value1 = []
            this.value2 = []
          }
          console.log('res', res)
        } else {
          return false
        }
      })
    },
    async getTrainList() {
      const res = await trainList({
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        lecturerName: this.findMsg.lecturerName,
        courseTime: this.findMsg.courseTime,
        workshop: this.findMsg.workshop,
        team: this.findMsg.team,
        status: this.findMsg.status,
      })
      if (res.code == 200) {
        this.trainList = res.data.list
        this.total = res.data.total
      }
      // console.log('this.trainList', res,this.trainList,this.total)
    },
     changeNow(){
      // debugger
      this.$refs.changeMsg.validate(( valid) => {
        // console.log(this.changeMsg.nonArrivalNames)
        if(valid){
          // console.log(valid)
          let params = {
            courseContent: this.changeMsg.courseContent,
            courseTheme: this.changeMsg.courseTheme,
            id: this.changeMsg.id,
            interaction: this.changeMsg.interaction,
            courseTime: this.courseTimeNow,
            isPlan: this.changeMsg.isPlan,
            lecturerId: this.changeMsg.lecturerId,
            purpose: this.changeMsg.purpose,
            team: this.changeMsg.team,
            teamAuditor: this.changeMsg.teamAuditor,
            workshop: this.changeMsg.workshop,
            workshopAuditor: this.changeMsg.workshopAuditor,
            nonArrivalCause: this.changeMsg.nonArrivalCause,
            nonArrivalNames: this.changeMsg.nonArrivalNames,
            practicalNumber: this.changeMsg.practicalNumber,
            shouldNumber: this.changeMsg.shouldNumber,
            courseSummary: this.changeMsg.courseSummary,
          }
          console.log(params)
           console.log('params')
          perfectCourseRecordDetails(params).then(res=>{
               console.log(res,'----------')
               this.$message({
                message: '填写成功',
                type: 'success',
              })
              this.dialogVisibleRecord = false
              this.getTrainList()
              this.changeMsg = {}
          })
         
          // if (res.code == 200) {
          //   this.$message({
          //     message: '填写成功',
          //     type: 'success',
          //   })
          //   this.dialogVisibleRecord = false
          //   this.getTrainList()
          // }
        }else {
          return false;
        }
        
      })
      
    },
    courseScore(){
      this.$refs.addScore.validate(async (valid) => {
        if (valid) {
          const res = await courseScore({
            coordinate: this.addScore.coordinate,
            expressive: this.addScore.expressive,
            prepare: this.addScore.prepare,
            satisfaction: this.addScore.satisfaction,
            thorough: this.addScore.thorough,
            courseRecordId: this.addScore.courseRecordId,
          })
          if (res.code == 200) {
            this.$message({
              message: '评分成功',
              type: 'success',
            })
            this.dialogVisibleScore = false
            this.$refs.addScore.resetFields()
            this.getTrainList()
          }
          console.log('res', res)
        } else {
          return false
        }
      })
    },
    // addPerfectDetail() {
    //   this.$refs.addForm.validate(async (valid) => {
    //     if (valid) {
    //       const res = await addPerfectDetail({
    //         courseTheme: this.addForm.courseTheme,
    //         courseContent: this.addForm.courseContent,
    //         courseTime: this.addForm.courseTime,
    //         isPlan: this.addForm.isPlan,
    //         lecturerName: this.addForm.lecturerName,
    //         purpose: this.addForm.purpose,
    //         team: this.addForm.team,
    //         teamAuditor: this.addForm.teamAuditor,
    //         workshop: this.addForm.workshop,
    //         workshopAuditor: this.addForm.workshopAuditor,
    //         interaction: this.addForm.interaction,
    //         nonArrivalCause: this.addForm.nonArrivalCause,
    //         nonArrivalNames: this.addForm.nonArrivalNames,
    //         practicalNumber: this.addForm.practicalNumber,
    //         shouldNumber: this.addForm.shouldNumber,
    //         id: "11",
    //       })
    //       if (res.code == 200) {
    //         this.$message({
    //           message: '创建成功',
    //           type: 'success',
    //         })
    //         this.dialogVisibleAdd = false
    //         this.getTrainList()
    //       }
    //       console.log('res', res)
    //     } else {
    //       return false
    //     }
    //   })
    // },
    cancel(){
      this.dialogVisibleRecord = false
      this.$message({message: '取消填写'});
      this.$refs.changeMsg.resetFields()
    },
    cancelAdd(){
      this.dialogVisibleAdd = false
      this.$message({message: '取消发起'});
      this.$refs.addForm.resetFields()
      this.addForm = {
        courseTheme:'',
        courseTime:'',
        isPlan:'',
        lecturerId:'',
        purpose:'',
        team:'',
        teamAuditor:'',
        workshop:'',
        workshopAuditor:'',
        participationIds:[],
        shouldNumber:null,
        trainingType:'',
      }
      this.value1= []
      this.value2= []
    },
    //培训待确认：不参加情况
    notJoin(){
      this.$prompt('不参加原因', '原因', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputType:'textarea',
      }).then(({ value }) => {
        if(value){
          console.log('有value')
          //用户不参加培训
          receiveCourse({
            "courseId": this.thisConfirmID,
            "courseStatus": "-1",
            "empId": "",
            "pendingId": ""
          }).then(res=>{
            //添加不参加微小课原因
            toBeConfirmedNonArrival({
              "courseEmpId": "",
              "courseRecordId": this.thisConfirmID,
              "nonArrivalCause": value
            }).then(res=>{
              console.log(res)
              this.dialogVisibleIsConfirm = false;
              this.$message({
                type: 'success',
                message: '成功提交：不参加'
              });
              this.getTrainList()
            })
          })
        }else{
          console.log('没value')
          this.$message({
            type: 'error',
            message: '不参加的话必须填写不参加原因，请重新填写。'
          });
        }
        
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '取消操作'
        });       
      });
    },

    //培训待确认：参加情况
    goJoin(){
      //用户参加培训
      receiveCourse({
        "courseId": this.thisConfirmID,
        "courseStatus": "1",
        "empId": "",
        "pendingId": ""
      }).then(res=>{
        console.log(res)
        this.$message({
          type: 'success',
          message: '成功参加'
        });
        this.dialogVisibleIsConfirm = false;
        this.getTrainList()
      })
    },
    // changeNow(){
    //   this.$refs.changeMsg.validate(async (valid) => {
    //     if(valid){
    //       const res = await updateCourseRecordDetails({
    //         courseContent: this.changeMsg.courseContent,
    //         courseTime: utils.formatDate('yyyy-MM-dd HH:mm:ss',this.changeMsg.courseTime),
    //         courseTheme: this.changeMsg.courseTheme,
    //         empId:'614309d64b46a81477981d8',
    //         id: this.changeMsg.id,
    //         interaction: this.changeMsg.interaction,
    //         isPlan: this.changeMsg.isPlan,
    //         lecturerName: this.changeMsg.lecturerName,
    //         purpose: this.changeMsg.purpose,
    //         team: this.changeMsg.team,
    //         teamAuditor: this.changeMsg.teamAuditor,
    //         workshop: this.changeMsg.workshop,
    //         workshopAuditor: this.changeMsg.workshopAuditor,
    //         nonArrivalCause: this.changeMsg.nonArrivalCause,
    //         nonArrivalNames: this.changeMsg.nonArrivalNames,
    //         practicalNumber: this.changeMsg.practicalNumber,
    //         shouldNumber: this.changeMsg.shouldNumber,
    //       })
    //       if (res.code == 200) {
    //         // this.$message({
    //         //   message: '创建成功',
    //         //   type: 'success',
    //         // })
    //         this.dialogVisible2 = false
    //         this.getTrainList()
    //       }
    //     }else {
    //       return false;
    //     }
        
    //   })
      
    // },
    cancelScore(){
      this.dialogVisibleScore = false
      this.$refs.addScore.resetFields()
      this.$message({
        message: '取消评分',
      })
    },
    query() {
      this.getTrainList()
    },
    reset() {
      this.findMsg.courseTime = ''
      this.findMsg.lecturerId = ''
      this.findMsg.workshop = ''
      this.findMsg.team = ''
      this.findMsg.status = ''
      this.state = ''
    },
    currentChange(pageNo) {
      this.pageNo = pageNo
      this.getTrainList()
    },
    indexAdd(index) {
      return index + 1 + (this.pageNo - 1) * this.pageSize
    },
    goDetail(id){
      this.dialogVisibleDetail = true;
      detailsCourse({"id":id}).then(res=>{
        console.log(res)
        this.finnalDetail = res.data;
        this.uncommittedNum = res.data.shouldNumber-res.data.practicalNumber;
        // console.log("??????",res.data.participation)
        this.courseTimeNow = utils.formatDate(res.data.courseTime,'yyyy-MM-dd HH:mm:ss')
        this.scoreNow = [{
          "coordinate": res.data.coordinate,
          "prepare": res.data.prepare,
          "thorough": res.data.thorough,
          "expressive": res.data.expressive,
          "satisfaction": res.data.satisfaction,
          "score": res.data.score
        }];

      })
    },
    // goChange(id){
    //   this.dialogVisible2 = true
    //   detailsCourse({"id":id}).then(res=>{
    //     console.log(res)
    //       this.changeMsg = res.data;
    //       // this.courseTime1 = utils.formatDate('yyyy-MM-dd HH:mm:ss',this.detailMsg.courseTime)
    //       // console.log(this.courseTime1)
    //   })
    // },
    goScore(id){
      this.dialogVisibleScore = true
      console.log(id)
      this.addScore.courseRecordId = id;
    },
    deleteRecord(id){
      this.deleteThis = id;
      this.$confirm('是否删除这条培训记录', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
          center: true
        }).then(() => {
          console.log('11111',this.deleteThis)
          deleteCourseById({"id":this.deleteThis}).then(res=>{
            this.getTrainList()
            this.$message({
              type: 'success',
              message: '删除成功!',
            });
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    //  handleRemove(file, fileList) {
    //   console.log(file, fileList);
    // },
    // handlePictureCardPreview(file) {
    //   this.dialogImageUrl = file.url;
    //   this.dialogVisibleImg = true;
    // }
    submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      }
  },
};
</script>

<style lang="scss" scoped>
.c-main-make {
  margin-left: 35px;
  height: 230px;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  overflow: hidden;
  border: 1px #dcdee0 solid;
}
.main-seting {
  width: 100%;
  height: auto;
  padding-bottom: 30px;
}
.c-main-show {
  margin-left: 35px;
  height: auto;
  background: #fff;
  margin-right: 35px;
  margin-bottom: 35px;
  position: relative;
  // overflow: hidden;
  border: 1px #dcdee0 solid;
}
.title-text {
  width: 100%;
  height: 50px;
  border-bottom: 1px #dcdee0 solid;
  font-family: "微软雅黑 Bold", "微软雅黑 Regular", 微软雅黑, sans-serif;
  font-weight: 700;
  color: #666666;
  line-height: 50px;

  p{
    margin-left: 25px;
  }
}
.main-scroll {
  height: 1000px;
  overflow-y: scroll;
}
.PeopleList{
  list-style: none;
  // border-bottom: 1px solid black;
  // border-top: 1px solid black;
  // border-left: 1px solid black;
  // border-right: 1px solid black;
  width: auto;
  height: auto;
  li{
    float: left;
    width: 103px;
    height: 41px;
    font-size: 16px;
    border: 1px solid #c9ccd2;
    color: #c9ccd2;
    margin-right: 5px;
    margin-bottom: 5px;
    line-height: 41px;
    text-align: center;
  }
  .clearfloat{
    clear:both;
    height:0;
    font-size: 1px;
    line-height: 0px;
  }
}
</style>